<template>
  <div class="toolbar">
    <!-- 文件操作按钮组 -->
    <div class="toolbar-group">
      <el-button-group>
        <el-tooltip content="新建文件 (Ctrl+N)" placement="bottom">
          <el-button @click="newFile" class="toolbar-btn" size="small" :loading="loading.newFile">
            📝
          </el-button>
        </el-tooltip>
        <el-tooltip content="打开文件 (Ctrl+O)" placement="bottom">
          <el-button @click="openFile" class="toolbar-btn" size="small" :loading="loading.openFile">
            📁
          </el-button>
        </el-tooltip>
        <el-tooltip content="保存文件 (Ctrl+S)" placement="bottom">
          <el-button @click="saveFile" class="toolbar-btn" size="small" :loading="loading.saveFile">
            💾
          </el-button>
        </el-tooltip>
        <el-tooltip content="另存为 (Ctrl+Shift+S)" placement="bottom">
          <el-button @click="saveFileAs" class="toolbar-btn" size="small" :loading="loading.saveFileAs">
            📄
          </el-button>
        </el-tooltip>
      </el-button-group>
    </div>

    <div class="toolbar-divider"></div>
    
    <div class="toolbar-group">
      <el-button-group>
        <el-button @click="formatText('# ')" class="toolbar-btn" size="small" :class="{ active: isHeadingActive(1) }">#</el-button>
        <el-button @click="formatText('## ')" class="toolbar-btn" size="small" :class="{ active: isHeadingActive(2) }">##</el-button>
        <el-button @click="formatText('### ')" class="toolbar-btn" size="small" :class="{ active: isHeadingActive(3) }">###</el-button>
      </el-button-group>
    </div>
    
    <div class="toolbar-group">
      <el-button-group>
        <el-button @click="formatText('**', '**')" class="toolbar-btn" size="small" :class="{ active: isBoldActive() }">
          <strong>B</strong>
        </el-button>
        <el-button @click="formatText('*', '*')" class="toolbar-btn" size="small" :class="{ active: isItalicActive() }">
          <em>I</em>
        </el-button>
        <el-button @click="formatText('~~', '~~')" class="toolbar-btn" size="small" :class="{ active: isStrikethroughActive() }">
          <span style="text-decoration: line-through;">S</span>
        </el-button>
      </el-button-group>
    </div>
    
    <div class="toolbar-group">
      <el-button-group>
        <el-button @click="formatText('- ')" class="toolbar-btn" size="small" :class="{ active: isBulletListActive() }">
          <span>•</span>
        </el-button>
        <el-button @click="formatText('1. ')" class="toolbar-btn" size="small" :class="{ active: isOrderedListActive() }">
          <span>1.</span>
        </el-button>
        <el-button @click="insertTable" class="toolbar-btn" size="small">
          <span>表格</span>
        </el-button>
      </el-button-group>
    </div>
    
    <div class="toolbar-group">
      <el-button-group>
        <el-button @click="formatText('> ')" class="toolbar-btn" size="small" :class="{ active: isBlockquoteActive() }">
          <span>></span>
        </el-button>
        <el-button @click="insertCodeBlock" class="toolbar-btn" size="small" :class="{ active: isCodeBlockActive() }">
          <span>代码</span>
        </el-button>
        <el-button @click="formatText('`', '`')" class="toolbar-btn" size="small" :class="{ active: isInlineCodeActive() }">
          <span>行内</span>
        </el-button>
        <el-button @click="openLinkDialog" class="toolbar-btn" size="small">
          <span>链接</span>
        </el-button>
        <el-button @click="openImageDialog" class="toolbar-btn" size="small">
          <span>图片</span>
        </el-button>
      </el-button-group>
    </div>
    
    <div class="toolbar-group">
      <el-dropdown @command="handleExport" trigger="click" :teleported="true" :popper-options="{ strategy: 'fixed' }" placement="bottom-start">
        <el-button class="toolbar-btn" size="small">
          导出<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="html">导出为HTML</el-dropdown-item>
            <el-dropdown-item command="pdf">导出为PDF</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- 系统打印按钮 -->
    <div class="toolbar-group">
      <el-tooltip content="打印" placement="bottom">
        <el-button @click="printDocument" class="toolbar-btn" size="small">
          🖨️
        </el-button>
      </el-tooltip>
    </div>
    
    <div class="toolbar-group spacer"></div>
    
    <!-- 视图切换（编辑/预览显示与隐藏） -->
    <div class="toolbar-group">
      <el-button-group>
        <el-button @click="toggleEditorPane" class="toolbar-btn" size="small" :type="store.showEditor ? 'primary' : 'default'">
          <span>{{ store.showEditor ? '编辑区:开' : '编辑区:关' }}</span>
        </el-button>
        <el-button @click="togglePreviewPane" class="toolbar-btn" size="small" :type="store.showPreview ? 'primary' : 'default'">
          <span>{{ store.showPreview ? '预览区:开' : '预览区:关' }}</span>
        </el-button>
      </el-button-group>
    </div>

    <div class="toolbar-group">
      <el-button-group>
        <el-button @click="toggleTheme" class="toolbar-btn theme-toggle" size="small">
          <span v-if="store.settings.theme === 'light'">☀️</span>
          <span v-else>🌙</span>
        </el-button>
        <el-tooltip content="设置" placement="bottom">
          <el-button @click="emit('open-settings')" class="toolbar-btn settings-btn" size="small">⚙️</el-button>
        </el-tooltip>
      </el-button-group>
    </div>
  </div>

  <!-- 链接输入弹层 -->
  <Teleport to="body">
    <transition name="fade">
      <div v-if="showLinkDialog" class="input-dialog-overlay" @click="cancelLinkDialog">
        <div class="input-dialog" @click.stop>
          <div class="input-dialog-header">插入链接</div>
          <div class="input-dialog-body">
            <label>文本</label>
            <input ref="linkTextInput" v-model="linkForm.text" type="text" placeholder="显示文本" />
            <label>URL</label>
            <input v-model="linkForm.url" type="text" placeholder="https://example.com" @keydown.enter.prevent="confirmInsertLink" />
          </div>
          <div class="input-dialog-footer">
            <button class="btn primary" :disabled="!linkForm.url" @click="confirmInsertLink">确定</button>
            <button class="btn" @click="cancelLinkDialog">取消</button>
          </div>
        </div>
      </div>
    </transition>
  </Teleport>

  <!-- 图片输入弹层 -->
  <Teleport to="body">
    <transition name="fade">
      <div v-if="showImageDialog" class="input-dialog-overlay" @click="cancelImageDialog">
        <div class="input-dialog" @click.stop>
          <div class="input-dialog-header">插入图片</div>
          <div class="input-dialog-body">
            <label>替代文本</label>
            <input ref="imageAltInput" v-model="imageForm.alt" type="text" placeholder="图片描述" />
            <label>URL</label>
            <input v-model="imageForm.url" type="text" placeholder="https://example.com/image.png" @keydown.enter.prevent="confirmInsertImage" />
          </div>
          <div class="input-dialog-footer">
            <button class="btn primary" :disabled="!imageForm.url" @click="confirmInsertImage">确定</button>
            <button class="btn" @click="cancelImageDialog">取消</button>
          </div>
        </div>
      </div>
    </transition>
  </Teleport>
</template>

<script setup lang="ts">
import { useAppStore } from '../store'
import { ExportUtils } from '../utils/exportUtils'
import { FileUtils } from '../utils/fileUtils'
import { ElMessage } from 'element-plus'
import { ref, computed, reactive, nextTick } from 'vue'

// 定义属性
const props = defineProps<{
  editor: any
}>()

const store = useAppStore()

// 添加按钮加载状态
const loading = reactive({
  newFile: false,
  openFile: false,
  saveFile: false,
  saveFileAs: false
})

// 输入弹层状态
const showLinkDialog = ref(false)
const showImageDialog = ref(false)
const linkForm = reactive({ text: '', url: '' })
const imageForm = reactive({ alt: '', url: '' })
const linkTextInput = ref<HTMLInputElement | null>(null)
const imageAltInput = ref<HTMLInputElement | null>(null)

// 选中文本工具
const getSelectedText = (): string => {
  const textarea = document.querySelector('.editor-textarea') as HTMLTextAreaElement
  if (!textarea) return ''
  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  return store.editorContent.substring(start, end)
}

// 打开/取消/确认 插入链接
const openLinkDialog = () => {
  const sel = getSelectedText()
  linkForm.text = sel || ''
  linkForm.url = ''
  showLinkDialog.value = true
  nextTick(() => { linkTextInput.value?.focus() })
}
const cancelLinkDialog = () => {
  showLinkDialog.value = false
  linkForm.text = ''
  linkForm.url = ''
}
const confirmInsertLink = () => {
  if (!linkForm.url) return
  const text = linkForm.text || linkForm.url
  insertTextAtCursor(`[${text}](${linkForm.url})`)
  showLinkDialog.value = false
  linkForm.text = ''
  linkForm.url = ''
  ElMessage.success('链接已插入')
}

// 打开/取消/确认 插入图片
const openImageDialog = () => {
  const sel = getSelectedText()
  imageForm.alt = sel || ''
  imageForm.url = ''
  showImageDialog.value = true
  nextTick(() => { imageAltInput.value?.focus() })
}
const cancelImageDialog = () => {
  showImageDialog.value = false
  imageForm.alt = ''
  imageForm.url = ''
}
const confirmInsertImage = () => {
  if (!imageForm.url) return
  const alt = imageForm.alt || '图片描述'
  insertTextAtCursor(`![${alt}](${imageForm.url})`)
  showImageDialog.value = false
  imageForm.alt = ''
  imageForm.url = ''
  ElMessage.success('图片已插入')
}

// 格式化文本
const formatText = (prefix: string, suffix: string = '') => {
  // 获取当前内容
  const currentContent = store.editorContent
  const textarea = document.querySelector('.editor-textarea') as HTMLTextAreaElement
  if (!textarea) {
    return
  }
  
  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const selectedText = currentContent.substring(start, end)
  
  const newText = prefix + selectedText + suffix
  const newContent = 
    currentContent.substring(0, start) + 
    newText + 
    currentContent.substring(end)
  
  store.updateEditorContent(newContent)
  
  // 更新光标位置
  setTimeout(() => {
    textarea.focus()
    textarea.setSelectionRange(start + prefix.length, start + prefix.length + selectedText.length)
  }, 0)
}

// 插入表格
const insertTable = () => {
  const table = `
| 列1 | 列2 | 列3 |
| ---- | ---- | ---- |
| 内容1 | 内容2 | 内容3 |
| 内容4 | 内容5 | 内容6 |
`
  insertTextAtCursor(table)
}

// 插入代码块
const insertCodeBlock = () => {
  const codeBlock = `
\`\`\`javascript
// 在这里输入代码
console.log('Hello, World!')
\`\`\`
`
  insertTextAtCursor(codeBlock)
}

// 插入链接
const insertLink = () => {
  const link = '[链接文本](https://)'
  insertTextAtCursor(link)
}

// 插入图片
const insertImage = () => {
  const image = '![图片描述](图片链接)'
  insertTextAtCursor(image)
}

// 在光标位置插入文本
const insertTextAtCursor = (text: string) => {
  // 获取当前内容
  const currentContent = store.editorContent
  const textarea = document.querySelector('.editor-textarea') as HTMLTextAreaElement
  if (!textarea) {
    return
  }
  
  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const newContent = 
    currentContent.substring(0, start) + 
    text + 
    currentContent.substring(end)
  
  store.updateEditorContent(newContent)
  
  // 更新光标位置
  setTimeout(() => {
    textarea.focus()
    textarea.setSelectionRange(start + text.length, start + text.length)
  }, 0)
}

// 切换主题
const toggleTheme = () => {
  console.log('toggleTheme被调用，当前主题:', store.settings.theme)
  store.toggleTheme()
  console.log('toggleTheme调用后，新主题:', store.settings.theme)
}

// 获取文件名（不包含扩展名）
const getFileNameWithoutExtension = (filePath: string): string => {
  if (!filePath) return 'Untitled'
  const parts = filePath.split('/')
  const fileName = parts[parts.length - 1]
  const dotIndex = fileName.lastIndexOf('.')
  return dotIndex > 0 ? fileName.substring(0, dotIndex) : fileName
}

// 处理导出命令
const handleExport = async (command: string) => {
  const content = store.editorContent
  const title = store.currentFile.path ? 
    getFileNameWithoutExtension(store.currentFile.path) : 
    'Untitled'
  
  if (command === 'html') {
    const success = await ExportUtils.exportToHTML(content, title)
    if (success) {
      ElMessage.success('HTML导出成功')
    } else {
      ElMessage.error('HTML导出失败')
    }
  } else if (command === 'pdf') {
    const success = await ExportUtils.exportToPDF(content, title)
    if (success) {
      ElMessage.success('PDF导出成功')
    } else {
      ElMessage.error('PDF导出失败')
    }
  }
}

// 系统打印
const printDocument = async () => {
  try {
    const api = (window as any).electronAPI
    if (api?.print) {
      await api.print()
    } else if (typeof window.print === 'function') {
      // 在浏览器预览时兜底使用 window.print
      window.print()
    } else {
      ElMessage.error('当前环境不支持打印')
    }
  } catch (error) {
    console.error('Print error:', error)
    ElMessage.error('调用打印失败')
  }
}

// 文件操作函数
// 新建文件
const newFile = async () => {
  // 使用App.vue的通用保存确认逻辑
  const canProceed = await (window as any).appHandleUnsavedChanges?.()
  if (!canProceed) {
    return // 用户取消操作或保存失败
  }

  loading.newFile = true
  store.setLoading(true)
  
  try {
    const file = await FileUtils.newFile()
    if (file) {
      store.setCurrentFile(file.path, file.content)
      store.setModified(false)
      ElMessage.success('新建文件已创建')
    }
  } catch (error) {
    console.error('New file error:', error)
    ElMessage.error('新建文件失败')
  } finally {
    loading.newFile = false
    store.setLoading(false)
  }
}
// 打开文件
const openFile = async () => {
  // 使用App.vue的通用保存确认逻辑
  const canProceed = await (window as any).appHandleUnsavedChanges?.()
  if (!canProceed) {
    return // 用户取消操作或保存失败
  }

  loading.openFile = true
  store.setLoading(true)
  
  try {
    const file = await FileUtils.openFile()
    if (file) {
      store.setCurrentFile(file.path, file.content)
      ElMessage.success('文件打开成功')
    }
  } catch (error) {
    ElMessage.error('文件打开失败')
    console.error('Open file error:', error)
  } finally {
    loading.openFile = false
    store.setLoading(false)
  }
}

// 保存文件
const saveFile = async () => {
  loading.saveFile = true
  store.setLoading(true)
  
  try {
    // 已有路径：直接保存
    if (store.currentFile && store.currentFile.path) {
      const r = await (window as any).electronAPI?.saveFile?.(store.editorContent, store.currentFile.path)
      if (r?.success) {
        store.setModified(false)
        store.currentFile.content = store.editorContent
        ElMessage.success('文件保存成功')
      } else {
        ElMessage.error('文件保存失败')
      }
    } else {
      // 无路径：触发另存为；用户取消则不提示失败
      const r = await (window as any).electronAPI?.saveFileAs?.(store.editorContent)
      if (!r?.canceled && r?.filePath) {
        store.setCurrentFile(r.filePath, store.editorContent)
        store.setModified(false)
        ElMessage.success('文件保存成功')
      } else {
        // 用户取消另存为，不提示失败
      }
    }
  } catch (error) {
    ElMessage.error('文件保存失败')
    console.error('Save file error:', error)
  } finally {
    loading.saveFile = false
    store.setLoading(false)
  }
}

// 另存为文件
const saveFileAs = async () => {
  loading.saveFileAs = true
  store.setLoading(true)
  
  try {
    const r = await (window as any).electronAPI?.saveFileAs?.(store.editorContent)
    if (!r?.canceled && r?.filePath) {
      store.setCurrentFile(r.filePath, store.editorContent)
      store.setModified(false)
      ElMessage.success('文件另存为成功')
    } else {
      // 用户取消另存为：不提示失败
    }
  } catch (error) {
    ElMessage.error('文件另存为失败')
    console.error('Save file as error:', error)
  } finally {
    loading.saveFileAs = false
    store.setLoading(false)
  }
}

// 检查当前是否为标题格式
const isHeadingActive = (level: number) => {
  const textarea = document.querySelector('.editor-textarea') as HTMLTextAreaElement
  if (!textarea) return false
  
  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const lineStart = store.editorContent.lastIndexOf('\n', start - 1) + 1
  const line = store.editorContent.substring(lineStart, end)
  
  return line.startsWith('#'.repeat(level) + ' ')
}

// 检查当前是否为粗体格式
const isBoldActive = () => {
  const textarea = document.querySelector('.editor-textarea') as HTMLTextAreaElement
  if (!textarea) return false
  
  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const selectedText = store.editorContent.substring(start, end)
  
  return selectedText.startsWith('**') && selectedText.endsWith('**')
}

// 检查当前是否为斜体格式
const isItalicActive = () => {
  const textarea = document.querySelector('.editor-textarea') as HTMLTextAreaElement
  if (!textarea) return false
  
  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const selectedText = store.editorContent.substring(start, end)
  
  return selectedText.startsWith('*') && selectedText.endsWith('*') && !selectedText.startsWith('**')
}

// 检查当前是否为删除线格式
const isStrikethroughActive = () => {
  const textarea = document.querySelector('.editor-textarea') as HTMLTextAreaElement
  if (!textarea) return false
  
  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const selectedText = store.editorContent.substring(start, end)
  
  return selectedText.startsWith('~~') && selectedText.endsWith('~~')
}

// 检查当前是否为无序列表格式
const isBulletListActive = () => {
  const textarea = document.querySelector('.editor-textarea') as HTMLTextAreaElement
  if (!textarea) return false
  
  const start = textarea.selectionStart
  const lineStart = store.editorContent.lastIndexOf('\n', start - 1) + 1
  const line = store.editorContent.substring(lineStart, start)
  
  return line.startsWith('- ')
}

// 检查当前是否为有序列表格式
const isOrderedListActive = () => {
  const textarea = document.querySelector('.editor-textarea') as HTMLTextAreaElement
  if (!textarea) return false
  
  const start = textarea.selectionStart
  const lineStart = store.editorContent.lastIndexOf('\n', start - 1) + 1
  const line = store.editorContent.substring(lineStart, start)
  
  return /^\d+\.\s/.test(line)
}

// 检查当前是否为引用格式
const isBlockquoteActive = () => {
  const textarea = document.querySelector('.editor-textarea') as HTMLTextAreaElement
  if (!textarea) return false
  
  const start = textarea.selectionStart
  const lineStart = store.editorContent.lastIndexOf('\n', start - 1) + 1
  const line = store.editorContent.substring(lineStart, start)
  
  return line.startsWith('> ')
}

// 检查当前是否为代码块格式
const isCodeBlockActive = () => {
  const textarea = document.querySelector('.editor-textarea') as HTMLTextAreaElement
  if (!textarea) return false
  
  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const selectedText = store.editorContent.substring(start, end)
  
  return selectedText.startsWith('```') && selectedText.endsWith('```')
}

// 检查当前是否为行内代码格式
const isInlineCodeActive = () => {
  const textarea = document.querySelector('.editor-textarea') as HTMLTextAreaElement
  if (!textarea) return false
  
  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const selectedText = store.editorContent.substring(start, end)
  
  return selectedText.startsWith('`') && selectedText.endsWith('`') && !selectedText.startsWith('```')
}
const emit = defineEmits(['open-settings'])

// 视图切换
const toggleEditorPane = () => {
  const ok = store.toggleEditorVisibility()
  if (!ok) {
    ElMessage.warning('至少保留一个面板可见')
  }
}
const togglePreviewPane = () => {
  const ok = store.togglePreviewVisibility()
  if (!ok) {
    ElMessage.warning('至少保留一个面板可见')
  }
}
</script>

<style scoped>
.toolbar {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  flex-shrink: 0; /* 防止工具栏收缩 */
  border-radius: 8px 8px 0 0;
}

.toolbar-group {
  display: flex;
  align-items: center;
  margin-right: 16px;
  position: relative;
}

.toolbar-group::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent);
}

.toolbar-group:last-child::after {
  display: none;
}

.toolbar-group.spacer {
  flex: 1;
}

.toolbar-divider {
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.15), transparent);
  margin: 0 12px;
}

.toolbar-btn {
  padding: 8px 12px !important;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(5px);
  color: #374151 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.toolbar-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(102, 126, 234, 0.3) !important;
}

.toolbar-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  transform: translateY(-1px);
}

.toolbar-btn.active:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}

.toolbar :deep(.el-button-group) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.toolbar :deep(.el-button-group .el-button) {
  border-radius: 0 !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  margin: 0 !important;
}

.toolbar :deep(.el-button-group .el-button:first-child) {
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
}

.toolbar :deep(.el-button-group .el-button:last-child) {
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  border-right: none !important;
}

.theme-toggle {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.theme-toggle:hover {
  transform: rotate(180deg) scale(1.1);
  box-shadow: 0 6px 16px rgba(251, 191, 36, 0.4);
}

.settings-btn {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.settings-btn:hover {
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 6px 16px rgba(107, 114, 128, 0.4);
}

/* 添加一些微妙的动画效果 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.toolbar-btn:active {
  animation: pulse 0.2s ease-in-out;
}

/* 暗色主题 */
.dark .toolbar {
  background: linear-gradient(135deg, rgba(45, 55, 72, 0.9) 0%, rgba(26, 32, 44, 0.9) 100%);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark .toolbar-group::after {
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.dark .toolbar-divider {
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15), transparent);
}

.dark .toolbar-btn {
  background: rgba(45, 55, 72, 0.8) !important;
  backdrop-filter: blur(5px);
  color: #e1e5e9 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark .toolbar-btn:hover {
  background: rgba(45, 55, 72, 0.95) !important;
  border-color: rgba(102, 126, 234, 0.4) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dark .toolbar-btn.active {
  background: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(76, 81, 191, 0.4);
}

.dark .toolbar-btn.active:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
  box-shadow: 0 6px 16px rgba(76, 81, 191, 0.5);
}

.dark .theme-toggle {
  background: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%) !important;
  box-shadow: 0 4px 12px rgba(76, 81, 191, 0.3);
}

.dark .theme-toggle:hover {
  box-shadow: 0 6px 16px rgba(76, 81, 191, 0.4);
}

.dark .settings-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.dark .settings-btn:hover {
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.4);
}

.dark .toolbar :deep(.el-button-group) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.dark .toolbar :deep(.el-button-group .el-button) {
  border-right-color: rgba(255, 255, 255, 0.1) !important;
}

/* 输入弹层样式 */
.input-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.input-dialog {
  width: 420px;
  max-width: 90vw;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.2);
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
}

.dark .input-dialog {
  background: rgba(45,55,72,0.98);
  border-color: rgba(255,255,255,0.12);
}

.input-dialog-header {
  padding: 14px 16px;
  font-weight: 600;
  font-size: 14px;
  color: #1f2937;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.dark .input-dialog-header {
  color: #e5e7eb;
  background: linear-gradient(135deg, #2d3748 0%, #1f2937 100%);
  border-bottom-color: rgba(255,255,255,0.10);
}

.input-dialog-body {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.input-dialog-body label {
  font-size: 12px;
  color: #6b7280;
}

.dark .input-dialog-body label {
  color: #cbd5e1;
}

.input-dialog-body input {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
}

.input-dialog-body input:focus {
  outline: none;
  border-color: rgba(99,102,241,0.6);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

.dark .input-dialog-body input {
  border-color: rgba(255,255,255,0.15);
  background: rgba(31,41,55,0.9);
  color: #e5e7eb;
}

.input-dialog-footer {
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.dark .input-dialog-footer {
  border-top-color: rgba(255,255,255,0.10);
}

.btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.95);
  color: #374151;
  cursor: pointer;
}

.btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: #fff;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 弹层淡入动画 */
.fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>